/**
 * @author:linjiye
 * @date: 2024/12/31
 * @desc:
 **/

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React from 'react'

type Props = {
    len?: number,
    index?: number,
    onClickSub?: () => void,
    onClickAdd?: () => void
}

const FileTabBtn = ({len = 0, index = 0,btnStyles, onClickSub, onClickAdd}: Props) => {
    function handleSub() {
        onClickSub?.()
    }

    function handleAdd() {
        onClickAdd?.()
    }

    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => index > 0 && handleSub()}>
                <Text style={[styles.btn,btnStyles, {
                    color: index <= 0 ? '#D6D7D9' : '#464647',
                    transform: [{rotate: '180deg'}]
                }]}>&#xe609;</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => (index < len - 1) && handleAdd()}>
                <Text style={[styles.btn,btnStyles, {
                    color: index < len - 1 ? '#464647' : '#D6D7D9',
                    marginLeft: 8
                }]}>&#xe609;</Text>
            </TouchableOpacity>
        </View>
    )
}

export default FileTabBtn

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: "center",
    },
    btn: {
        padding: 8,
        backgroundColor: '#F1F2F4',
        borderRadius: 8,
        fontFamily: 'FcIconFont',
        fontSize: 16
    }
})